<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="站点名称" prop="name">
        <el-input v-model="form.name" autocomplete="off" placeholder="请输入站点名称"></el-input>
      </el-form-item>
      <el-form-item label="所在地" prop="areaArr">
        <el-cascader
          ref="cascaderAddr1"
          v-model="form.areaArr"
          :options="addressData"
          :show-all-levels="true"
          :props="{ expandTrigger: 'hover' }"
          style="width: 100%"
          placeholder="请选择所在地"
          @change="handleChangeAddress"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入详细地址"></el-input>
      </el-form-item>
      <el-form-item label="获取经纬度" prop="lat">
        <el-row>
          <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
            <el-input
              v-model="form.lng"
              :disabled="true"
              placeholder="请获取经纬度"
            ></el-input>
          </el-col>
          <el-col
            :xs="1"
            :sm="1"
            :md="1"
            :lg="1"
            :xl="1"
            style="text-align: center"
          >
            --
          </el-col>
          <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
            <el-input
              v-model="form.lat"
              placeholder="请获取经纬度"
              :disabled="true"
            ></el-input>
          </el-col>
          <el-col
            :xs="1"
            :sm="1"
            :md="1"
            :lg="1"
            :xl="1"
            style="text-align: center"
          >
            -
          </el-col>
          <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
            <el-button size="medium" type="primary" @click="handleMap">
              获取经纬度
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="备注" prop="note">
        <el-input v-model="form.note" type="textarea" placeholder="请输入备注"></el-input>
      </el-form-item>
     <el-form-item class="contacts-add">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="cancle">关闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import * as APITeam from '@/api/wangge'
// import locales from '@/locales'
// import { area } from '@/api/area'
import addressData from "@/utils/address";
export default {
  name: 'team-add',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      addressData: [],
      // 显示图标窗口
      dialogVisible: false,
      address: '',
      // 省
      provinceList: [],
      // 市
      cityList: [],
      // 县
      areaList: [],
      // 村
      townList: [],
      form: {},
      // 地图插件
      geocoder: null,
      // 表单校验
      rules: {
        name: [
          { required: true, message: '请输入站点名称', trigger: 'blur' }
        ],
        areaArr: [
          { required: true, message: '请选择省市', trigger: 'change' }
        ]
      }
    }
  },
  beforeCreate () {
  },
  mounted () {
    const self = this;
    self.addressData = addressData;
    if(this.data.hasOwnProperty('province_id')){
      const res = JSON.parse(JSON.stringify(this.data));
      this.$set(this.form, "areaArr", [res['province_id'].toString(),res['city_id'].toString(),res['area_id'].toString()]);
    }
    if(this.data.hasOwnProperty('area')){
     this.areaString = this.data.area;
    }
  },
  methods: {
    // 添加老人家属
    onSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const { id, province_id, town_id, city_id, area_id } = this.form
          const params = Object.assign({}, this.form, { province_id: this.form.areaArr[0], city_id: this.form.areaArr[1], area_id: this.form.areaArr[2],town_id: '', })
          delete params['areaArr'];
          if (id) {
            APITeam.teamEdit(params).then(res => {
              this.cancle()
              this.load()
            })
          } else {
            APITeam.teamAdd(params).then(res => {
              this.cancle()
              this.load()
            })
          }
        }
      })
    },
    load () {
      this.$emit('load')
    },
    cancle () {
      this.$refs.form.resetFields()
      this.$emit('cancle')
    },
    handleChangeAddress(value, form, label) {
      let areaString = this.$refs.cascaderAddr1.$refs.panel
        .getCheckedNodes()[0]
        .pathLabels.join(",");
      this.areaString = areaString;
    },
    handleMap() {
      if (!this.form.areaArr || this.form.areaArr == "") {
        this.$message({
          type: "warning",
          message: "请先选择所在地",
        });
        return false;
      }
      if (!this.form.address || this.form.address == "") {
        this.$message({
          type: "warning",
          message: "请先填写详细地址",
        });
        return false;
      }
      if(this.$refs.cascaderAddr1.$refs.panel.getCheckedNodes()[0]){
        let areaString = this.$refs.cascaderAddr1.$refs.panel
         .getCheckedNodes()[0]
         .pathLabels.join(",");
         this.areaString = areaString;
      }
      this.$emit("handleMap", this.areaString + this.form.address);
    },
  },
  watch: {
    data: {
      handler (res) {
        const resData = JSON.parse(JSON.stringify(res));
        if (JSON.stringify(resData) != "{}" && resData.hasOwnProperty('base')) {
          this.$set(this.form, "lng", resData.base.lng);
          // this.$set(this.form, "address", resData.base.address);
          this.$set(this.form, "lat", resData.base.lat);
        } else {
          this.form = resData;
        }
      },
      // 可以一进页面就触发监听器  监听器自带的immediate
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss">
  .user-form-item {
    height: 33px;
  }
  .el-select{
    width: 100%;
  }
</style>
